<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0"> 学校外卖管理平台 </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1">反馈问题</el-menu-item>
    <el-menu-item index="2">入驻商家</el-menu-item>
    <el-menu-item index="3">配送员审核</el-menu-item>
    <el-menu-item index="4">退出登录</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import router from "../../router/index";

const activeIndex = ref("0");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  if (key == "0") {
    router.push("/");
  } else if (key == "1") {
    router.push("/manager/freeback");
  } else if (key == "2") {
    router.push("/manager/joinShop");
  } else if (key == "3") {
    router.push("/manager/joinSender");
  } else if (key == "4") {
    localStorage.clear();
    ElMessage({
      type: "success",
      message: "退出登录成功",
    });
    router.push("/auth/login");
  }
};
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>
